<template>
    <div>
        <el-card>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>销售工具</el-breadcrumb-item>
                <el-breadcrumb-item>销售数据</el-breadcrumb-item>
            </el-breadcrumb>


            <el-button type="primary" size="small" @click="addHandle" style="margin-top: 15px;">添加</el-button>

            <el-table :data="productList" border style="width: 100%" height="670"
                :header-cell-style="{ background: '#409EFF', color: '#FFF' }">
                <el-table-column prop="productName" label="商品名称"></el-table-column>
                <el-table-column prop="productStatus" label="状态">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.productStatus == 1">启用</el-tag>
                        <el-tag type="danger" v-else>禁用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="small" icon="el-icon-edit" @click="check(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>


            <!-- 添加商品弹窗 -->
            <el-dialog title="添加商品" :visible.sync="dialogVisible" width="30%" top="4%" :before-close="handleClose">
                <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="商品名称" prop="productName">
                        <el-input v-model="form.productName"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="handleClose">取 消</el-button>
                    <el-button type="primary" @click="submitHandle">确 定</el-button>
                </span>
            </el-dialog>


        </el-card>
    </div>
</template>
<script>
export default {
    name: 'product',
    data() {
        return {
            productList: [],
            dialogVisible: false,
            form: {

            },
            rules: {
                productName: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                ],
            }
        }
    },
    created() {

    },
    methods: {

        submitHandle() {
            this.$refs.ruleForm.validate((valid) => {
                console.log(valid);

                if (!valid) return

                console.log(this.form);
                this.dialogVisible = false

            });



        },
        addHandle() {
            this.dialogVisible = true
        },
        check(obj) {
            console.log(obj);
        },
        handleClose() {
            this.dialogVisible = false
        },

        getList() {
            listProduct().then(res => {
                if (res.flag) {
                    this.productList = res.data
                }
            })
        },
    }
}
</script>

<style lang="less" scoped></style>